<template>
  <div v-if="data">
    <el-form
      :class="(data.config || {}).className"
      :inline="(data.config || {}).inline"
      :label-position="(data.config || {}).labelPosition || 'left'"
      :label-width="(data.config || {}).labelWidth + 'px'"
      :label-suffix="(data.config || {}).labelSuffix"
      :hide-required-asterisk="(data.config || {}).hideRequiredAsterisk"
      :show-message="(data.config || {}).showMessage"
      :inline-message="(data.config || {}).inlineMessage"
      :status-icon="(data.config || {}).statusIcon"
      :validate-on-rule-change="(data.config || {}).validateOnRuleChange"
      :size="(data.config || {}).size || 'small'"
      :disabled="(data.config || {}).disabled"
      >
      <vuedraggable
        style="min-height:800px;"
        v-model="data.list"
        v-bind="{group:'people', ghostClass: 'ghost'}"
        @add="handleWidgetAdd">
        <!-- 拖拽过来的内容渲染 -->
        <div v-for="(item, index) in (data.list || [])" :key="index" class="vuedraggableitem">
          <template v-if="item.type === 'grid' || item.type === 'panel'">
            <widget-form-col
              :key="item.key"
              :element.sync="item">
            </widget-form-col>
          </template>
          <template v-else>
            <widget-form-item
              :element.sync="item"
              ></widget-form-item>
          </template>
        </div>
      </vuedraggable>
    </el-form>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import { addDraggerWidget } from '../tool/magicGenerate'
// 常规组件
import WidgetFormItem from './WidgetFormItem.vue'
// 布局组件
import WidgetFormCol from './WidgetFormCol.vue'
export default {
  name: 'WidgetForm',
  components: {
    vuedraggable,
    WidgetFormItem,
    WidgetFormCol
  },
  props: {
    // data 数据
    data: {}
  },
  data () {
    return {
    }
  },
  watch: {
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 拖拽元素添加的时候调用
    handleWidgetAdd ({ newIndex, element }) {
      let returnItem = addDraggerWidget(this.data.list[newIndex])
      // 给返回数据添加双向绑定
      this.$set(this.data.list, newIndex, returnItem)
      // 记录当前拖拽进去的item元素
      this.$store.commit('set_selectWidget', returnItem)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
